<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        .box1{
            min-width:1400px;
            width: 100%;
            height: 1500px;
            background-image: url("img/bj.jpg");
            background-repeat: no-repeat;
            background-size: 100%;
        }
        .box2{
            min-width:1400px;
            width: 80%;
            height: 50px;
            margin: auto;
            text-align: center;
            background:rgba(225,225,225,.01);
            background-image: url("img/1.png");
            background-repeat: no-repeat;
            background-position: left;
            position: fixed;
            top: 0;
            left:10%;
        }
        .box22{
            transition: all .8s;
            min-width:1400px;
            width:100%;
            height: 50px;
            background:rgba(225,225,225,.01);
            position: fixed;
            top: 0;
            left:0;
        }
        .box2_1{
            text-align: left;
            margin-left:110px;
            color: #fff;
        }
        .span1{
           line-height: 50px;
            margin-right: 25px;
            cursor: pointer;
        }
        .span2{
            margin-left: -5px;
            padding:0px 5px 2px 5px;
            background-color: #F6A623;
        }
        .span3{
            line-height: 50px;
            margin-right: 25px;
            font-size:2px;
            cursor: pointer;
        }
        .hx{
            position: absolute;
            display: inline-block;
            width: 30px;
            border-top: 1px solid #fff;
            margin-top: 40px;
            visibility:visible;

        }
        .hx1{
            position: absolute;
            display: inline-block;
            width: 30px;
            border-top: 1px solid #fff;
            margin-top: 40px;
            visibility:hidden;

        }
        .hx2{
            position: absolute;
            display: inline-block;
            width: 70px;
            border-top: 1px solid #fff;
            margin-top: 40px;
            visibility:hidden;

        }
        .in1{
            width: 60%;
            height: 30px;
            padding-left:10px;
            color: #A9A9A9;
            outline: none;
            border: 1px solid #DDDDDD;
            /*opacity: 1;*/
            visibility:hidden;
        }
        .bu1{
            outline: none;
            width: 55px;
            height: 35px;
            border: 0;
            color: #fff;
            font-size: 17px;
            cursor: pointer;
            background:rgba(255,0,0,.4);
        }
        .bu1:hover{
            outline: none;
            width: 55px;
            height: 35px;
            border: 0;
            color: #fff;
            font-size: 17px;
            cursor: pointer;
            background:rgba(255,0,0,.7);
        }
        .bu2{
            outline: none;
            width: 55px;
            height: 33px;
            border: 1px solid #fff;
            color: #fff;
            font-size: 17px;
            cursor: pointer;
            background:rgba(255,255,255,.1);
        }
        .bu2:hover{
            outline: none;
            width: 55px;
            height: 33px;
            border: 1px solid #fff;
            color: #000;
            font-size: 17px;
            cursor: pointer;
            background:rgba(255,255,255,1);
        }
        .div1{
            color: #fff;
           text-align: center;
            padding-top:200px;
            font-size:50px;
        }
        .div2{
            text-align: center;
        }
        .in2{
            border: 1px solid #fff;
            outline: none;
            width: 560px;
            padding-left: 20px;
            height: 35px;
            background: rgba(0,0,0,.5);
        }

    </style>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div class="box1">
    <!--导航栏-->
    <div class="box22">
        <div class="box2">
            <!--左-->
            <div class="box2_1">
                <div class="hx"></div>
                <span class="span1 s1">发现</span>
                <div class="hx1 hx4"></div>
                <span class="span1 s2">最新</span>
                <div class="hx2"></div>
                <span class="span1 s3">美思
                    <span class="span2">new</span>
                </span>
                <div class="hx1 hx3"></div>
                <span class="span1 s4">教育</span>
                <span class="span3">●●●</span>
                <!--右-->
                <input type="text" placeholder="搜索你喜欢的" class="in1"/>
                <button class="bu1">注册</button>
                <button class="bu2">登录</button>
            </div>


        </div>

    </div>

    <div class="div1">
        <span>花瓣，陪你做生活的设计师</span>
    </div>
    <br/>
    <div class="div2">
        <input type="text" placeholder="搜索你喜欢的" class="in2"/>
    </div>

</div>

<script>
    $(function(){

        $(window).scroll(function(){
            if($(this).scrollTop()>220){
                $(".box22").css({ background:"rgba(225,225,225,1)"});
                $(".in1").css({ visibility:"visible"});
                $(".box2").css({ backgroundImage:" url('img/2.png')"});
                $(".s2").css({ color:"#000"});
                $(".s3").css({ color:"#000"});
                $(".s4").css({ color:"#000"});
                $(".s1").css({ color:"#C90000"});
                $(".hx").css({ visibility:"hidden"});
                $(".hx4").css({ visibility:"hidden"});
                $(".hx2").css({ visibility:"hidden"});
                $(".hx3").css({ visibility:"hidden"});
                $(".s2").mouseover(function(){
                    $(this).css({color:"#C90000"});
                    $(".hx4").css({ visibility:"hidden"});
                });
                $(".s2").mouseout(function(){
                    $(this).css({color:"#000"})
                });

                $(".s3").mouseover(function(){
                    $(this).css({color:"#C90000"});
                    $(".hx2").css({ visibility:"hidden"});
                });
                $(".s3").mouseout(function(){
                    $(this).css({color:"#000"})
                });
                $(".s4").mouseover(function(){
                    $(this).css({color:"#C90000"});
                    $(".hx3").css({ visibility:"hidden"});
                })
                $(".s4").mouseout(function(){
                    $(this).css({color:"#000"})
                })
            }
           else if($(this).scrollTop()<220){
                $(".box22").css({ background:"rgba(225,225,225,.01)"});
                $(".in1").css({ visibility:"hidden"});
                $(".box2").css({ backgroundImage:" url('img/1.png')"});
                $(".s2").css({ color:"#fff"});
                $(".s3").css({ color:"#fff"});
                $(".s4").css({ color:"#fff"});
                $(".s1").css({ color:"#fff"});
                $(".hx").css({ visibility:"visible"});



            $(".s2").mouseover(function(){
                $(this).css({color:"#fff"});
                $(".hx4").css({ visibility:"visible"});
            });
            $(".s2").mouseout(function(){
                $(this).css({color:"#fff"});
                $(".hx4").css({ visibility:"hidden"});
            });
            $(".s3").mouseover(function(){
                $(this).css({color:"#fff"});
                $(".hx2").css({ visibility:"visible"});
            });
            $(".s3").mouseout(function(){
                $(this).css({color:"#fff"});
                $(".hx2").css({ visibility:"hidden"});
            });
            $(".s4").mouseover(function(){
                $(this).css({color:"#fff"});
                $(".hx3").css({ visibility:"visible"});
            })
            $(".s4").mouseout(function(){
                $(this).css({color:"#fff"})
                $(".hx3").css({ visibility:"hidden"});
            })


            }

        });
    })






</script>



</body>
</html>